<template>
    <div class="c-notice c-first">
        <div class="c-first-item">
            <ul class="c-first-two-menu">
                <li  v-for="(item,index) in menu"
                     :class="{'border-red': index === menuI}"
                     @click="checkMenu(index)">{{item}}</li>
            </ul>
            <div class="c-notice-none" v-if="list.length < 1">
                暂时没有获奖人员，敬请期待。
            </div>
            <div class="c-notice-table" v-if="list.length > 0">
                <div class="c-notice-item" v-for="(item,index) in list" :class="{'notice-item-active': index%2 === 0}">
                    <div>{{item.level}}</div>
                    <div>{{item.user_name}}</div>
                    <div>{{item.area}}{{item.school}}{{item.class}}{{item.grade}}{{item.banji}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { cTitle } from '../../../components/main';
    export default {
        name:'notice',

        data() {
            return {
                menu: ['小学组','初中组','高中组','大学组'],

                menuI:0,

                list:[  ]
            }
        },

        methods: {
            checkMenu(i) {
                this.menuI = i;
                this.getList(i + 1);
            },

            getList(type = 1) {
                this.axios.get('get_winner', {params:{ type }}).then(data => {
                    data = data.data;
                    this.list = data;
                })
            }
        },

        components:{
            cTitle
        },

        mounted() {
            this.getList();
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import "../../../plugins/assets/css/flex.less";

    .c-first{
        width: 50%;
        margin: 50px auto;
        .c-first-two-menu {
            width: 60%;
            margin:30px auto;
            .flex-auto;
            font-size:22px;
            li {
                padding-bottom: 10px;
                cursor: pointer;
                color: #B12828;
                border-bottom:2px solid transparent;
            }
            .border-red{
                border-bottom: 2px solid #B12828;
            }
        }
        .c-notice-table{
            .c-notice-item {
                .box-sizing;
                .flex-between;
                width: 80%;
                margin: 0 auto;
                padding: 15px 30px;
                cursor: pointer;
                font-size: 14px;
                > div {
                    width: 10%;
                }
                > :last-child {
                    width: 25%;
                }
                > :first-child {
                    width: 50%;
                }
            }
            .notice-item-active {
                background:#E8E1CA;
            }
       }
        .c-notice-none{
            color: #B12828;
            text-align: center;
            margin: 30px auto;
        }
    }

    @media screen and (max-width: 768px) {
        .c-first{
            width: 90%;
            margin: 50px auto;
            .c-first-two-menu {
                width: 60%;
                margin:30px auto;
                .flex-auto;
                font-size:3vw;
                li {
                    padding-bottom: 10px;
                    cursor: pointer;
                    color: #B12828;
                    border-bottom:2px solid transparent;
                }
                .border-red{
                    border-bottom: 2px solid #B12828;
                }
            }
            .c-notice-table{
                .c-notice-item {
                    .box-sizing;
                    .flex-between;
                    width: 80%;
                    margin: 0 auto;
                    padding: 2vw 5vw;
                    cursor: pointer;
                    font-size: 14px;
                    > div {
                        width: 20%;
                    }
                    > :last-child {
                        width: 35%;
                    }
                    > :first-child {
                        width: 30%;
                    }
                }
                .notice-item-active {
                    background:#E8E1CA;
                }
            }
        }
    }
</style>